/** 加载进度条,使用方法同Indicator */
<template>
    <div class="load-body" v-show="visible">
        <div class="body-info">
            <div>
                <Spin>
                    <Icon type="ios-loading" size=40 class="demo-spin-icon-load"></Icon>
                    <div class="Loading-Style">{{text}}</div>
                </Spin>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            text: {
                type: String,
                default: "加载中..."
            },
            visible: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {};
        },
        components: {},
        methods: {
        },
        computed: {}
    };
</script>
<style scoped>
    .load-body {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4);
        z-index: 99999999;
    }
    .body-info {
        position: relative;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border-radius: 8px;
        text-align: center;
    }
    .ivu-spin-fix{
        background-color: rgba(0,0,0,0.6);
    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
    .demo-spin-icon-load{
        color:#fff;
    }
    .Loading-Style{
        color:#fff;
        font-size:15px;
        padding-top:8px;
    }
</style>
